<template>
	<view class="container">
		<!-- 头部  -->
		<headTop
		  :parent_name= "currentCustomer.customer_name"
			:header_content="header_content"
			:header_title="header_title"
		></headTop>
		
		<weekDate @getDay="getDays" :defaultDate="currentDate" @weekList="weekLists"></weekDate>
		<view class="content">
			<view class="course">
				<view v-for="(course,index) in currentCourseList" :key="index">
				<view class="item"  v-if="course.timetable_id != 1">
					<view class="course_header">
						<text class="f35">{{organization}} {{school_name}}</text>
						<image class="icon" src="../../../static/edu/phone-icon.png" @click="callTeacher(course,index)"></image>
					</view>
					<view class="time">
						<view class="timetable" >
							<view class="course">
								<button class="cu-btn status sm">{{ course.status === 1 ?"未上课":'已上课'}}</button>
								<text class="f26">[{{course.course_name}}]{{course.classroom_name}}</text>
							</view>
							<view class="f24">
								<text>上课时间：</text>
								<text>{{course.section_rank}}</text>
							</view>
						</view>
						<view>
							<button class="cu-btn btn" v-if="course.status == 1" @click="showQrModal(course,index)">签到</button>
							<button class="cu-btn btn-sign" v-if="course.status == 2" @click="signInCancel(course,index)">取消签到</button>
							<button class="cu-btn btn-sign" v-if="course.status == 3">迟到</button>
							<button class="cu-btn btn-sign" v-if="course.status == 4">旷课</button>
							<button class="cu-btn btn" v-if="course.status == 5" @click="leaveCancel(course,index)">取消请假</button>
						</view>
					</view>
					<view class="options" v-if="course.status != 5" style="border-top: 1rpx solid rgba(0,0,0,.5);">
						<view class="option" @click="check_leave(course,index)">
							<image class="icon" src="../../../static/edu/leave-icon.png" mode=""></image>
							<text class='f32' >请假</text>
						</view>
						<view class="line"></view>
						<view class="option">
							<image class="icon" src="../../../static/edu/course-icon.png" mode=""></image>
							<text class='f32' @click="evaluationInfo(course,index)">课堂评价</text>
						</view>
					</view>
				</view>
				<!-- 已请假 -->
				<view class="leave" v-if="course.status == 5">
					<view class="leave_header">
						<image class="icon mr20" src="../../../static/edu/leave-icon.png" mode=""></image>
						<text class="f35">请假</text>
					</view>
					<view class="leave_content">
						<view class="inner f28">{{course.leaves[0].reason}}</view>
					</view>
				</view>
				
				</view>
				<no-data v-if="noDatas"></no-data>
			</view>
		</view>
		
		<!-- 请假弹窗 -->
		<view class="my_popup_wd_box" :class="{my_on:true}" v-show="in_leave">
			<view class="my_empty-box">
				<view class="box-main">
					 <view class="icon-tips" @click="close_up"><text>×</text></view>
					 <view class="dialog_content">
							<text class="dialog_title">请假</text>
							<view class="row">
								<view class="row-title">
									学员姓名
								</view>
								<view class="row-data">
									<view class="">
										<text>{{ leavePopcustomerName }}</text>(已累计请假<text class="leaveNumber">{{ leavePopShowData.leave_count}}</text>次)
									</view>
								</view>
							</view>
							<view class="row">
								<view class="row-title">
									班级
								</view>
								<view class="row-data">
									<view>
										<text>{{ leavePopShowData.timetable.class_name }}</text>(<text>{{ leavePopShowData.timetable.class_date }}</text> <text style="margin-left: 5rpx;">{{ leavePopShowData.timetable.section_rank }}</text><text> {{ leavePopShowData.timetable.series_name }} </text>)
									</view>
								</view>
							</view>
							<view class="row">
								<view class="row-title">
									剩余课时
								</view>
								<view class="row-data">
									<view class="">
										早教
									</view>
									<view class="">
										购买课时:<text class="timeColor">{{ leavePopShowData.order_item_series.buy_class_hours_left }}</text>课时
									</view>
									<view class="">
										赠送课时:<text class="timeColor">{{ leavePopShowData.order_item_series.gift_class_hours_left }}</text>课时
									</view>
								</view>
							</view>
							<view class="row" >
								<view class="row-title">
									应扣课时
								</view>
								<view class="row-data">
									<text class="leaveNumber">{{ leavePopShowData.timetable.reduce_hours }}</text>
									<!-- <text class="leaveNumber" v-if="leavePopShowData.leave_count > leavePopShowData.order_info.leave_days">{{ leavePopShowData.timetable.reduce_hours }}</text>
									<text v-else class="leaveNumber">0</text> -->
								</view>
							</view>
						<view class="texts">
							 <textarea v-model="leaveReason" :show-confirm-bar="false" placeholder="请输入请假理由" class="txt_area" style="width:100%;border:2rpx solid #eee;border-radius:15rpx;text-align: left;padding:3%;"></textarea>
						</view>
						<view class="make-order" @click="addLeaveRecord">提交</view>
					 </view>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<view @tap="showQrModal(false)" class="my_popup_wd_box my_popup_wd_box_qr " :class="{my_on:showQR}">
			<view class="my_empty-box" id="qrCode" ref="qrCodeDiv" >
				<tki-qrcode
				ref="qrcode"
				:val="val"
				:size="size"
				:unit="unit"
				:background="background"
				:foreground="foreground"
				:pdground="pdground"
				:iconSize="iconsize"
				:onval="onval"
				:loadMake="loadMake"
				@result="qrR" />
			</view>
			<!-- <view class="qr-tips">全日制签到</view> -->
		</view>
		<sign ref='sign' @signIn='signIn'></sign>
	</view>
</template>
<script>
import weekDate from '../../component/calendar.vue'
import headTop from "../../component/head-top.vue"
import noData from '../../component/no-data.vue'
import sign from '../../component/sign.vue'
 export default {
	 components:{
		weekDate,
		headTop,
		noData,
		sign
	 },
	 
	 data() {
		return {
			sign_type:'',
			header_content: '每天的坚持都是大的进步哟',
			header_title: '课程表',
			status: 1,
			in_leave: false,
			userInfo : {},
			currentCustomer : {},
			startDate : '',
			endDate : '',
			currentDate : '',
			nowDate : '',
			courseList : [],
			currentCourseList : [],
			leaveInfo : {},
			leaveIndex : 0,
			leaveReason :'', //	请假原因
			noDatas : false,
			school_name : '',
			currentSignInfo:{},
			organization:this.config.DEFAULT_ORGANIZATION,
			deductNumber:0,  //应扣课时
			leavePopcustomerName:"",
			leavePopShowData:{},   //请假弹框中显示的学员数据
			
			// qr
			showQR : false,
			val:"", // 要生成的二维码值,
			size: 470, // 二维码大小
			unit: 'upx', // 单位
			background: '#ffffff', // 背景色
			foreground: '#000000', // 前景色
			iconsize: 45, // 二维码图标大小
			onval: false, // val值变化时自动重新生成二维码
			loadMake: false, // 组件加载完成后自动生成二维码
			qrSrc: '' ,// 二维码生成后的图片地址或base64
		 }
	},
	onLoad() {
		this.userInfo = getApp().globalData.userInfo;
		this.currentCustomer = getApp().globalData.currentCustomer;
		this.school_name = this.currentCustomer.school_name || ''
		// this.userInfo = getApp().globalData.userInfo || uni.getStorageSync('userInfo');
		// this.currentCustomer = getApp().globalData.currentCustomer || uni.getStorageSync('currentCustomer');
		let date = new Date();
		this.nowDate = this.currentDate = this.dateFormat(date,'yyyy-MM-dd');
		
		//计时器
		// this.timeTick();
		var timesStamp = date.getTime();
		var currenDay = date.getDay();
		var dates = [];
		for (var i = 0; i < 7; i++) { // 5表示星期1~5，7表示 1~7 
			if (i == 0) {
				this.startDate = this.dateFormat(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)), 'yyyy-MM-dd');
			} 
			if (i == 6){
				this.endDate = this.dateFormat(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)), 'yyyy-MM-dd');
			}
		}
		this.getCourseList();
	},
	onShow() {
		if (!this.userInfo) {
			uni.navigateTo({
				url:'../../login/login-wx'
			})
		}
		this.val = this.currentCustomer.customer_id;
	},
	onPullDownRefresh() {
		setTimeout(function(){
			uni.stopPullDownRefresh()
		},1000)
		this.getCourseList();
	},
	methods: {	
		showQrModal(switch_status) {
			if (switch_status) {
				this.showQR = true;
				this.creatQrcode();
			} else {
				this.showQR = false;
			}
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode()
		},
		qrR(res) {
			this.qrSrc = res
		},
		getDays(day) {
			this.currentDate = day;
			this.switchDate();
		},
		weekLists (week) {
			this.startDate = week.shift();
			this.endDate = week.pop();
			this.getCourseList();
		},
		switchDate(){
			//切换日期
			this.currentCourseList = [];
			for (let week in this.courseList) {
				for (let courseDay in this.courseList[week]) {
					if (this.currentDate == this.courseList[week][courseDay].class_date) {
						this.currentCourseList = this.courseList[week];
						break ;
					}
				}
			}
			console.log(this.currentCourseList == '')
			if (this.currentCourseList == '') {
				this.noDatas = true;
			} else {
				this.noDatas = false;
			}
		},
		getCourseList() {
			//获取课程表
			//let that = this;
			uni.showLoading({
				title:'加载中...'
			});
			let params = {
				customer_id : this.currentCustomer.customer_id,
				start_date : this.startDate,
				end_date : this.endDate
			};
			this.common.http.request('/api/v1/edu/timetables','GET',params,res => {
				console.log(res.data);
				if (res.data.code == 0) {
					this.courseList = res.data.data;
					this.switchDate();
				}
				uni.hideLoading();
			});
		},
		addLeaveRecord() {
			//新增请假记录
			if (this.leaveReason.length < 5) {
				uni.showToast({
					icon:'none',
					title:'请假原因最少5个字'
				})
				return ;
			}
			uni.showLoading({
				title:'加载中...'
			})
			let that = this;
			let params = {
				customer_id : that.currentCustomer.customer_id,
				timetable_id : that.leaveInfo.timetable_id,
				reason : that.leaveReason || '',
				school_id: that.currentCustomer.school_id
			}
			that.common.http.request('/api/v1/edu/leave','POST',params,res => {
				console.log('请假',res.data) 
				if (res.data.code == 0){
					uni.showToast({
						title:'请假成功'
					})
					that.in_leave = false;
					that.leaveReason = "";
					that.currentCourseList[that.leaveIndex].status = 5 //以请假
					if(that.currentCourseList[that.leaveIndex].leaves.length == 0) {
						that.currentCourseList[that.leaveIndex].leaves.push({
							reason : params.reason
						})
					} else {
						that.currentCourseList[that.leaveIndex].leaves[0].reason = params.reason
					}
				} else {
					uni.showToast({
						icon:'none',
						title:res.data.code
					})
				}
				uni.hideLoading();
			})
		},
		leaveCancel (course,index) {
			//取消请假
			uni.showLoading({
				title:'加载中...'
			});
			let that = this;
			let params = {
				customer_id : that.currentCustomer.customer_id,
				timetable_id : course.timetable_id,
				school_id: that.currentCustomer.school_id
			}
			that.common.http.request('/api/v1/edu/leave/cancel','POST',params,res => {
				console.log('leaveCancle',res) ;
				if (res.data.code == 0) {
					course.status = 1;
				}
				uni.hideLoading();
			});
		},
		showSign(course,index){
			this.currentSignInfo = course
			this.currentSignInfo.index = index
			if (course.class_date != this.nowDate) {
				uni.showToast({
					icon:'none',
					title:'只能签到今天的课程'
				})
				return ;
			}
			this.$refs.sign.open()
		},
		signIn(handSign) {
			//签到
			uni.showLoading({
				title:'加载中...'
			});
			let that = this;
			let params = {
				customer_id : that.currentCustomer.customer_id,
				timetable_id : that.currentSignInfo.timetable_id,
				attend_id : that.currentSignInfo.attend_id,
				school_id: that.currentCustomer.school_id,
				hand_sign: handSign.suc || ''
			};
			that.common.http.request('/api/v1/edu/timetable/attend/sign','POST',params,res => {
				if (res.data.code == 0) {
					uni.showToast({
						title:'签到成功'
					})
					that.currentSignInfo.status = 2;
				}
				uni.hideLoading();
			})
		},
		signInCancel(course,index) {
			//取消签到接口
			let that = this;
			uni.showModal({
				content:'是否确认取消签到',
				success(res) {
					if(res.confirm){
						uni.showLoading({
							title:'加载中...'
						});
						let params = {
							timetable_id : course.timetable_id,
							attend_id : course.attend_id,
							school_id: that.currentCustomer.school_id
							
						};
						that.common.http.request('/api/v1/edu/timetable/attend/cancel/sign','POST',params,res => {
							console.log('sign-in edu',res.data);
							if (res.data.code == 0) {
								course.status = 1;
							}
							uni.hideLoading();
						})
					}
				}
			})
		},
		check_leave(course,index){
			this.leavePopcustomerName = this.currentCustomer.customer_name;
			//请假弹窗
			if (course.class_date != this.nowDate) {
				uni.showToast({
					icon:'none',
					title:'只能请假今天的课程'
				})
				return ;
			}
			if (course.status >= 2 && course.status <= 4) {
				uni.showToast({
					icon:'none',
					title:'已经签到，不能请假，请取消签到后请假'
				})
				return ;
			}
			
			this.in_leave = !this.in_leave;
			this.leaveInfo = course;
			this.leaveIndex = index;
			// console.log(course)
			let params = {
				timetable_id: course.timetable_id,
				customer_id: course.customer_id
			};
			this.common.http.request("/api/v1/edu/before/leave","GET",params,res =>{
			
				if(res.data.code == 0){
					if(res.data.data !=null){
						this.leavePopShowData = res.data.data;
						console.log(this.leavePopShowData);
					}
				}
			})
		},
		callTeacher (course , index) {
			try {				
				uni.makePhoneCall({
					phoneNumber:course.teachers[0].teacher_mobile
				})
			} catch (e) {
				console.log(e)
			}
		},
		close_up(){
			this.in_leave = false;
			this.leaveReason = "";
		},
		evaluationInfo(course,index) {
			if (course.evaluation == 1) {
				uni.navigateTo({url:'../evaluation/evaluation?timetable_id=' + course.timetable_id + '&date=' + this.currentDate})
			} else {
				if (course.status == 1) {
					uni.showToast({
						icon:'none',
						title:'您还未签到'
					})
				} else if (course.status == 5) {
					uni.showToast({
						icon:'none',
						title:'您已请假，无课堂评价'
					})
				} else {					
					uni.showToast({
						icon:'none',
						title:'宝宝的课堂评价还未生成哦'
					})
					return ;
				}
			}
			
			
		}

	}
 }
</script>

<style lang="scss" scoped>
	.icon-tips{
		width: 140rpx;
		height: 140rpx;
		line-height: 140rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	// 请假弹框样式
	.dialog_content{
		padding-left: 20rpx;
		padding-right: 20rpx;
		.dialog_title{
			padding: 30rpx 0;
			font-size: 40rpx;
		}
		textarea{
			height: 200rpx;
		}
		.row{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.row-title{
				flex: 1;
			}
			.row-data{
				text-align: left;
				flex: 3;
				text{
					padding: 0;
					font-size: 28rpx;
					display: inline;
					color: #000;
				}
				.leaveNumber{
					color: red;
				}
				.timeColor{
					color: rgb(13, 56, 110);
				}
				.deductNumber{
					display: flex;
					width: 50%;
					height: 60rpx;
					border: 1rpx solid #efefef;
					.deductNumber-subtraction,.deductNumber-add{
						padding: 0 30rpx;
						line-height: 60rpx;
						background-color: #f7f8fa;
					}
					.deductNumber-inp{
						display: flex;
						input{
							margin:  auto 0;
							text-align: center;
						}
					}
				}
			}
		}
		.texts{
			margin-top: 20rpx;
		}
	}
	
	.container{
		.content{
			padding: 30rpx;
			.txt_area{
				border:2rpx solid #eee;
				border-radius: 14rpx;
			}
			.item{
				padding: 29rpx;
				margin-bottom: 30rpx;
				width:690rpx;
				// height:412rpx;
				border-radius:20rpx;
				box-shadow: 0px 0px 12rpx 6rpx #eee;
				.course_header{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					border-bottom: 0.5rpx solid rgba(0,0,0,.5) ;
					.icon{
						height: 41rpx;
						width: 41rpx;
					}
				}
				.time{
					height: 180rpx;
					padding: 43rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					// border-bottom: 1rpx solid rgba(0,0,0,.5);
					.timetable{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.course{
							margin-bottom: 20rpx;
						}
						.status{
							margin-right: 20rpx ;
							background:rgba(255,205,81,1);
						}
					}
					.btn{
						background: #FF9F68;
						color: #fff;
					}
				}
				.options{
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 24rpx 0 16rpx;
					.line{
						height: 43rpx;
						width: 2rpx;
						background: #979797;
					}
					.option{
						width: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						.icon{
							margin-right: 20rpx ;
							width: 42rpx;
							height: 42rpx;
						}
					}
				}
			}
			.leave{
				padding: 29rpx;
				margin-bottom: 30rpx;
				width:690rpx;
				border-radius:20rpx;
				box-shadow: 0px 0px 6px 3px #eee;
				.leave_header{
					display: flex;
					align-items: center;
					height: 60rpx;
					.icon{
						width: 42rpx;
						height: 42rpx;
					}
				}
				.leave_content{
					display: flex;
					justify-content: center;
					align-items: center;
					margin:40rpx 0 30rpx;
					.inner{
						padding: 30rpx;
						border-radius:40rpx;
						opacity:0.4;
						border:1rpx solid rgba(151,151,151,1);
						width: 100%;

					}
				}
			}
			.evaluation{
				width: 690rpx;
				padding: 29rpx 20rpx 10rpx 30rpx;
				margin-bottom: 30rpx;
				border-radius:20rpx;
				box-shadow: 0 0 4px 4px #eee;
				.evaluation_header{
					display:flex;
					align-items: center;
					.icon{
						width: 32rpx;
						height: 46rpx;
						margin-right:20rpx;
					}
				}
				.titinfo{
					line-height: 48rpx;
				  margin-top:48rpx;
					display: block;
				}
				.content{
					padding: 64rpx;
					.rate{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30rpx;
					}
				}
				
			}
		}
		.my_popup_wd_box_qr {
			background-color: rgba(0, 0, 0, 0.8);
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.my_empty-box {
				width: 280px;
				height: 280px;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				background-color: #fff;
				border-radius: 10rpx;
				image{
					width: 100%;
					// height: 100%;
				}
			}
			.qr-tips{
				margin-top: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
